<template>
  <div id="newlist222">
    <div class="img">
      <img :src="titles.img" alt="" width="100%" height="250px">
    </div>
    <div class="title">
      <h4>{{titles.name}}</h4><hr>
      <div style="padding:5px 0">
        <span><del style="color:#ccc">市场价:{{titles.old}}</del></span><span style="color:red">销售价:{{titles.new}}</span>
      </div>
      <div class="num" >
        <span>购买数量:</span><span @click="reduce">-</span>{{titles.num}}<span @click="plus">+</span>
      </div>
      <div>
        <mt-button type="primary" @click="jump">加入购物车</mt-button>
        <mt-button type="danger">立即购买</mt-button>
      </div>

    </div>
  </div>
</template>
<script>
export default {
  name:'newlist222',
  data(){
    return {
      titles:{
        old:3000000,new:2888888,name:'宾利',num:1,img:require('@/assets/222.jpg'),id:2
      }

    }
  },
  methods:{
    reduce(){
      if(this.titles.num>1){
        this.titles.num--
      }
    },
    plus(){
      this.titles.num++
    },
    jump(){
      this.$store.commit('plusall',this.titles)
      this.$router.push({name:'shopcart'})

  }
}}
</script>
<style lang="less">

#newlist222{
  .title{
    padding: 10px;
    margin:5px;
    border: 1px solid #ccc;
    font-size: 20px;
    .num{
      padding: 5px;
    }
    h4{
      padding: 10px 0;
    }
    span{
      padding:0px 15px;
    }
  }


}
</style>
